<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_指令</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<!--
常用的内置指令
v:text:更新元素的textContent
v:html:更新元素的innerHTML
v-if:如果为true，当前标签才会输出到页面
v-else:如果为false，当前标签才会输出到页面
v-show:通过控制display样式来控制隐藏显示
v-for:遍历数组、对象
v-on:事件监听一般简写为@
v-bind:强制绑定解析表达式，可以省略v-bind
v-model:双向数据绑定
ref:为某个元素注册一个唯一标识，vue对象通过$els属性访问这个元素对象
v-cloak:使用它防止表达式，与css配合:[v-cloak]{display:none}
-->

<div id="example">
    <p ref="content"> test111</p>
    <button @click="hint">提示</button>
    <p v-cloak>{{msg}}</p><!--利用的是指令这解析的时候存在，但是解析完毕后消失，不能匹配就会正常显示-->
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    alert("-----")//模拟页面加载慢，此时msg是会显示出表达式
const vm =new Vue({
    el:'#example',
    data:{
        msg:'测试显示'
    },
    methods:{
        hint(){
            alert(this.$refs.content.textContent)
        }
    }
})

</script>


</body>
</html>